<template>
    <div class="container">
        <div class="logo">
            <img
                alt="logo"
                src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/dfdba5317c0c20ce20e64fac803d52bc.svg~tplv-49unhts6dw-image.image"
            />
<!--            <div class="logo-text">Online Survey System</div>-->
        </div>
        <LoginBanner />
        <div class="content">
            <div class="content-inner">
                <LoginForm />
            </div>
            <div class="footer">
                <Footer/>
            </div>
        </div>

        <div class="loginbg">
            <img src="../../assets/login-bg.png" class="w-56 object-cover"/>
        </div>
    </div>
</template>

<script lang="ts" setup>
import LoginBanner from './components/banner.vue';
import LoginForm from './components/login-form.vue';
import Footer from "../../components/Footer.vue";
import {APP_NAME} from "../../config";
</script>

<style scoped>
.container {
    display: flex;
    height: 100vh;
}

.container .banner {
    width: 550px;
    background: linear-gradient(163.85deg, #1d2129 0%, #00308f 100%);
}

.container .content {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding-bottom: 40px;
}

.container .footer {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
}

.logo {
    position: fixed;
    top: 24px;
    left: 22px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
}

.logo-text {
    margin-right: 4px;
    margin-left: 4px;
    color: var(--color-fill-1);
    font-size: 20px;
}

.loginbg {
    position: fixed; /* 固定定位 */
    right: 0; /* 紧靠右侧 */
    top: 0; /* 从顶部开始 */
    z-index: 0; /* 确保在背景层 */
    padding-top: 90px;
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: flex-end; /* 内容靠右 */
}


</style>
